<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive ,onMounted} from "vue";
import gologin from "@/components/gologin";
import common from '@/utils/common'
import { memberAddressesAdd,memberAddressesDetail,memberAddressesModify } from "@/utils/api";
// 表单数据
const state=reactive({
  formData:{
    // consigneeName: "",
    // consigneeMobile: "",
    province: "",
    city: "",
    area: "",
    detailAddress:"",
    defaulted:0
  }
})
const gologinref=ref(null)
const checked=ref(false)
const changechecked=(e)=>{
  console.log(e.detail.value)
if(  e.detail.value[0]==1){
  state.formData.defaulted=1
}else{
  state.formData.defaulted=0
}
}
onLoad(async(options) => {
  // state.formData.id = uni.getStorageSync("userId");

  if(options.id){
    state.formData.id=options.id
    const {data}= await memberAddressesDetail({id:options.id})
    state.formData=data
    state.formData.fullLocationstr=`${state.formData.province} ${state.formData.city} ${state.formData.area}`
    state.formData.fullLocation=[state.formData.province,state.formData.city,state.formData.area]
    checked.value=state.formData.defaulted

  }
});
onMounted(()=>{
  if(!common.Islogin()){
    if( gologinref.value){
      gologinref.value.maopen();
    }
   
  }
})
const rules = {
  consigneeName: {
    type: "string",
    required: true,
    message: "请输入姓名",
    trigger: ["blur","change"],
  },
  consigneeMobile: {
    type: "string",
    required: true,
    message: "请输入",
    trigger: ["blur","change"],
  },
  // fullLocation: {
  //   type: "string",
  //   required: true,
  //   message: "请选择",
  //   trigger: ["change"],
  // },
  detailAddress: {
    type: "string",
    required: true,
    message: "请输入详细地址",
    trigger: ["blur","change"],
  },
};
const uForm = ref();
const showpop = () => {
  gologinref.value.maopen();
};
const submit = () => {
  // let userinfo = uni.getStorageSync("userinfo") ? JSON.parse(uni.getStorageSync("userinfo"))  : {};
  if(!common.Islogin()){
    showpop()
  }
  uForm.value.validate().then((res) => {
    if(res){
      console.log(state.formData.id)
      if(state.formData.id){
        let param = JSON.parse(JSON.stringify(state.formData));
    memberAddressesModify(param).then((res) => {
      uni.$u.toast('提交成功')
      uni.navigateBack();
    });
      }else{
        let param = JSON.parse(JSON.stringify(state.formData));
    memberAddressesAdd(param).then((res) => {
      uni.$u.toast('提交成功')
      uni.navigateBack();
    });
      }
  
    }
  }).catch(errors => {
			
			});
};

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const uCodeRef = ref(null);
// 收集所在地区
const onRegionChange = (ev) => {
  console.log('canshu',ev)
  // 省市区(前端展示)
  state.formData.fullLocationstr = ev.detail.value.join(' ')
  // 省市区(后端参数)
  // const [provinceCode, cityCode, countyCode] = ev.detail.code!
  const [province, city, area] = ev.detail.value!
  // form.value.provinceCode = provinceCode
  // Object.assign(formData, { provinceCode, cityCode, countyCode })
  Object.assign(state.formData, { province, city, area})
}
</script>

<template>
  <view class="content">
    <!-- <view class="title">地址识别</view>
    <u--textarea
      v-model="shibietext"
      height="217"
      :placeholderStyle="{ fontSize: '25rpx' }"
      placeholder="粘贴地址信息，自动拆分姓名、电话和地址"
    ></u--textarea>
    <view class="shibtn">粘贴并识别</view> -->
    <view class="title">地址信息</view>
    <u--form :model="state.formData" :rules="rules" ref="uForm" labelWidth="160">
      <view class="formbox">
        <u-form-item label="联系人 *" prop="consigneeName" :borderBottom="true">
          <u--input border="none" clearable placeholder="请输入联系人" v-model="state.formData.consigneeName" />
        </u-form-item>
        <u-form-item label="手机号 *" prop="consigneeMobile" :borderBottom="true">
          <u--input border="none" clearable placeholder="请输入手机号" v-model="state.formData.consigneeMobile" />
        </u-form-item>
        <u-form-item label="选择地区 *" prop="fullLocation" placeholder="请输入选择地区" :borderBottom="true">
        <!-- #ifdef MP-WEIXIN -->
        <picker
          @change="onRegionChange"
          class="picker"
          mode="region"
          :value="state.formData.fullLocation"
        >
          <view v-if="state.formData.fullLocationstr">{{ state.formData.fullLocationstr }}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
        <!-- #endif -->
        </u-form-item>
        <u-form-item label="详细地址 *" prop="detailAddress" :borderBottom="true">
          <u--input border="none" placeholder="请输入详细地址" clearable v-model="state.formData.detailAddress" />
        </u-form-item>
      </view>
    </u--form>
    <view class="mt40">
        <checkbox-group @change="changechecked">
            <label>
                <checkbox  color="#953B82" style="transform:scale(0.7)" :value="1" :checked="checked" />设为默认地址
            </label>
        </checkbox-group>
    </view>
  
    <!-- 吸底工具栏 -->
    <view
      class="toolbar-height"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 10 + 'px' }"
    ></view>
    <view
      class="toolbar"
      :style="{ paddingBottom: safeAreaInsets?.bottom + 10 + 'px' }"
    >
      <view class="button-grounp">
        <view @tap="submit" class="button payment-button"> 确认 </view>
      </view>
    </view>
    <gologin ref="gologinref" ></gologin>
  </view>
</template>

<style lang="scss" scoped>
.content {
  padding: 24rpx 30rpx;
  background: #ffffff;
  margin-top: 15rpx;
  font-size: 25rpx;
  color: #212121;
  ::v-deep  .u-textarea {
    position: relative;
    padding-bottom: 60rpx;
  }
  .title {
    margin-bottom: 20rpx;
  }
  .shibtn {
    background: #f1f1f1;
    border-radius: 38rpx;
    width: 157rpx;
    height: 58rpx;
    line-height: 58rpx;
    text-align: center;
    position: absolute;
    right: 60rpx;
    margin-top: -80rpx;
  }
}

</style>
